<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="../JS/vue.min.js"></script>
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
    <script src="../JS/vue-router.js"></script>
    
    <style>
      .el-carousel__item h3 {
        color: #475669;
        font-size: 14px;
        opacity: 0.75;
        line-height: 200px;
        margin: 0;
      }
      
      .el-carousel__item:nth-child(2n) {
        background-color: #99a9bf;
      }
      
      .el-carousel__item:nth-child(2n+1) {
        background-color: #d3dce6;
      }
      </style>
</head>
<body>
    <div id="app">
        <el-row class="tac">
            <div style="text-align: center;"><h5>后台管理系统</h5></div>
            <el-col :span="4">
              <el-menu
                default-active="2"
                class="el-menu-vertical-demo"
                @open="handleOpen"
                @close="handleClose"
                background-color="#545c64"
                text-color="#fff"
                active-text-color="#ffd04b"
                router>
                <el-submenu index="1">
                  <template slot="title">
                    <i class="el-icon-location"></i>
                    <span>导航一</span>
                  </template>
                  <el-menu-item-group>
                    <template slot="title">分组一</template>
                    <el-menu-item index="/login">登录</el-menu-item>
                    <el-menu-item index="/register">注册</el-menu-item>
                  </el-menu-item-group>
                  <el-menu-item-group title="分组二">
                    <el-menu-item index="/lunbo">轮播图</el-menu-item>
                  </el-menu-item-group>
                  <el-submenu index="1-4">
                    <template slot="title">选项4</template>
                    <el-menu-item index="1-4-1">选项1</el-menu-item>
                  </el-submenu>
                </el-submenu>
                <el-menu-item index="2">
                  <i class="el-icon-menu"></i>
                  <span slot="title">导航二</span>
                </el-menu-item>
                <el-menu-item index="3">
                  <i class="el-icon-document"></i>
                  <span slot="title">导航三</span>
                </el-menu-item>
                <el-menu-item index="4">
                  <i class="el-icon-setting"></i>
                  <span slot="title">导航四</span>
                </el-menu-item>
              </el-menu>
            </el-col>
            <el-col :span="20">
                <el-tabs type="border-card">
                    <el-tab-pane>
                      <span slot="label"><i class="el-icon-date"></i> 我的行程</span>
                      我的行程
                    </el-tab-pane>
                    <el-tab-pane label="消息中心">消息中心</el-tab-pane>
                    <el-tab-pane label="角色管理">角色管理</el-tab-pane>
                    <el-tab-pane label="定时任务补偿">定时任务补偿</el-tab-pane>
                  </el-tabs>

                  <transition mode="out-in">
                    <router-view></router-view>
                   </transition>
            </el-col>
          </el-row>
    </div>



    <template id="logintem">
      <div id="">
				<fieldset>
					<legend>登录</legend>
					<span>账号：</span><input type="text"><br>
					<span>密码：</span><input type="text"><br>
					<button>登录</button>
					<button>取消</button>
				</fieldset>
			</div>
         
    </template>
    <template id="registertem">
      <div id="">
				<fieldset>
					<legend>登录</legend>
					<span>账号：</span><input type="text"><br>
					<span>密码：</span><input type="text"><br>
					<span>邮箱：</span><input type="text"><br>
					<button>注册</button>
					<button>取消</button>
				</fieldset>
			</div>
    </template>

      <template id="carousel">
        <el-carousel :interval="4000" type="card" height="200px">
          <el-carousel-item v-for="item in 6" :key="item">
          </el-carousel-item>
        </el-carousel>
      </template>
    

    <script>
        // 创建2个组件
        var login = Vue.component('login',{
            template:'#logintem'
        })
        var register = Vue.component('register',{
            template:'#registertem'
        })
        var lunbo = Vue.component('lunbo',{
            template:'#carousel'
        })
       
        var router = new VueRouter({
            routes:[
                {path:'/login',component:login},
                {path:'/register',component:register},
                {path:'/lunbo',component:lunbo}
            ]
        })

        let app = new Vue({
            el: '#app',
            router:router,
            methods: {
                handleOpen(key, keyPath) {
                    console.log(key, keyPath);
                },
                handleClose(key, keyPath) {
                    console.log(key, keyPath);
                }
            }
        })

     
    </script>
</body>
</html>